<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="menuSelect"
    >
      <el-row>
        <el-col :span="18">
          <el-menu-item index="1">浏览足迹</el-menu-item>
        </el-col>
        <el-col :span="6">

          <el-button
            type="warning"
            size="small"
            @click="guanli"
          >批量管理</el-button>
          <el-button
            type="danger"
            plain
            v-if="isAll!=false"
            size="small"
            @click="delAll"
          >删除</el-button>
          <el-button
            type="primary"
            size="small"
            plain
            v-if="isAll!=false"
            @click="selectall"
          >全选</el-button>
        </el-col>
      </el-row>
    </el-menu>
    <div>
      <div class="box">
        <div
          v-for="item in history"
          :key="item.id"
          class="shop"
        >
          <div v-if="item.product">

            <el-checkbox-group
              v-model="delid"
              v-if="isAll!=false"
            >
              <el-checkbox :label="item.id">{{''}}</el-checkbox>
            </el-checkbox-group>
            <img :src="'http://139.198.178.82:9090/Shopping/'+item.product.defaultImg">
            <p class="shopname">
              {{item.product.name}}
            </p>
            <p style="text-align:center;color:orange">
              ￥{{item.product.shopPrice/100}}
            </p>
            <el-row>
              <el-col
                :span="12"
                class="btn"
              ><a @click="delhistory(item.id)">删除足迹</a></el-col>
              <el-col
                :span="12"
                class="btn"
              >
                <a @click="goto('/shopdetail','ShopDetail',item.product.id)">查看详情</a>
              </el-col>
            </el-row>
          </div>
          <div v-else>
            此商品不存在
          </div>
        </div>
      </div>
    </div>
    <div v-if="this.history==null">
      <p style="text-align:center;font-size:25px">当前没有浏览历史</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "history",
  data() {
    return {
      activeIndex: "1",
      history: [],
      isAll: false,
      delid: [],
      quanxuan: false,
    };
  },
  methods: {
    menuSelect() {},
    gethistory() {
      this.$get(
        this.url + "/history/query_history/" + this.$store.state.user.id
      ).then((res) => {
        if (res.code == "0") {
          this.history = res.data.itemsHistories;
          console.log(this.history);
        }
      });
    },
    delhistory(id) {
      console.log(id);
      this.$post(this.url + "/deleteFoot", {
        id: id,
      }).then((res) => {
        this.$message.success("删除成功");
        this.gethistory();
      });
    },
    goto(path, name, val) {
      sessionStorage.setItem("shopid", val);
      this.$router.push({
        path: path,
        name: name,
      });
    },
    // 批量管理
    guanli() {
      if (this.isAll == false) {
        this.isAll = true;
      } else {
        this.isAll = false;
      }
    },
    delAll() {
      console.log(this.delid);
      this.delid.forEach((element) => {
        this.$post(this.url + "/deleteFoot", {
          id: element,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.$message.success("删除成功");
            this.gethistory();
          }
        });
      });
    },
    // 全选
    selectall() {
      if (this.quanxuan == false) {
        this.history.forEach((element) => {
          this.delid.push(element.id);
        });
        this.quanxuan = true;
      } else {
        this.delid = [];
        this.quanxuan = false;
      }
    },
  },
  created() {
    this.gethistory();
  },
};
</script>

<style scoped>
.shop {
  width: 20%;
  border: 1px solid lightgray;
  margin: 15px;
}
img {
  width: 100%;
}
.box {
  display: flex;
  flex-wrap: wrap;
}
.shopname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn {
  border: 1px solid lightgray;
}
p {
  margin: 10px;
}
</style>